<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>粘性定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    dl {
      width: 300px;
      /* height: 350px; */
      border: 1px solid #ccc;
      /* overflow: scroll; */
      margin: 0 auto;
      padding: 0 10px;
    }
    dd, dt {
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding: 0 5px;
    }
    dt {
      position: sticky;
      top: 0;
      background-color: #ccc;
      color: #fff;
    }
  </style>
</head>
<body>
  <dl>
    <dt>A</dt>
    <dd>ALorem.</dd>
    <dd>AOdit.</dd>
    <dd>AVoluptates?</dd>
    <dd>AConsectetur?</dd>
    <dd>ARepudiandae?</dd>
    <dd>ADistinctio?</dd>
    <dd>AVoluptas?</dd>
    <dd>APorro.</dd>
    <dd>ADeleniti.</dd>
    <dd>ADicta?</dd>
    <dt>B</dt>
    <dd>BLorem.</dd>
    <dd>BOdit.</dd>
    <dd>BVoluptates?</dd>
    <dd>BConsectetur?</dd>
    <dd>BRepudiandae?</dd>
    <dd>BDistinctio?</dd>
    <dd>BVoluptas?</dd>
    <dd>BPorro.</dd>
    <dd>BDeleniti.</dd>
    <dd>BDicta?</dd>
    <dt>C</dt>
    <dd>CLorem.</dd>
    <dd>COdit.</dd>
    <dd>CVoluptates?</dd>
    <dd>CConsectetur?</dd>
    <dd>CRepudiandae?</dd>
    <dd>CDistinctio?</dd>
    <dd>CVoluptas?</dd>
    <dd>CPorro.</dd>
    <dd>CDeleniti.</dd>
    <dd>CDicta?</dd>
    <dt>E</dt>
    <dd>ELorem.</dd>
    <dd>EOdit.</dd>
    <dd>EVoluptates?</dd>
    <dd>EConsectetur?</dd>
    <dd>ERepudiandae?</dd>
    <dd>EDistinctio?</dd>
    <dd>EVoluptas?</dd>
    <dd>EPorro.</dd>
    <dd>EDeleniti.</dd>
    <dd>EDicta?</dd>
  </dl>
</body>
</html>